/**
 * Create By FengZheng
 * On 2019/9/1 0:54
 */
(function ($) {
    "use strict";

    /**
     * DOM元素
     */
    let $dom = {
        $clockContainer: $("#clock-container"),
        $clockHour: $("#clock-hour"),
        $clockMinute: $("#clock-minute"),
        $clockSecond: $("#clock-second")
    };

    /**
     * 时间
     */
    let $time = {
        $year: 0,
        $month: 0,
        $day: 0,
        $hours: 0,
        $minutes: 0,
        $seconds: 0
    };

    /**
     * 指针角度
     */
    let pointAngle = {
        hours: 0,
        minutes: 0,
        second: 0
    };

    /**
     * 时间初始化
     */
    function initTime() {
        let timeStamp = $dom.$clockContainer.attr("data-time");
        if( timeStamp !== undefined){
            timeStamp = parseInt(timeStamp);
            if(timeStamp > 0){
                let date = new Date(timeStamp);

                $time.$year = date.getFullYear();
                $time.$month = date.getMonth() + 1;
                $time.$day = date.getDate();
                $time.$hours = date.getHours();
                $time.$minutes = date.getMinutes();
                $time.$seconds = date.getSeconds();
            }
        }
    }

    /**
     * 初始化指针角度
     */
    function initAngle(){

        let miniHour = $time.$hours;
        if($time.$hours > 12){
            miniHour = $time.$hours - 12;
        }

        pointAngle.hours = miniHour * 30 + ($time.$minutes * 60 + $time.$seconds)* 0.008334;
        pointAngle.minutes = $time.$minutes * 0.1 + ($time.$minutes * 60) * 0.1;
        pointAngle.second = $time.$seconds * 6;

        pointReset();
    }

    /**
     * 指针角度复原
     */
    function pointReset() {
        pointAngle.hours = (pointAngle.hours >= 360) ? (pointAngle.hours - 360) : pointAngle.hours;
        pointAngle.minutes = (pointAngle.minutes >= 360) ? (pointAngle.minutes - 360) : pointAngle.minutes;
        pointAngle.second = (pointAngle.second >= 360) ? (pointAngle.second - 360) : pointAngle.second;
    }

    /**
     * 指针旋转
     */
    function pointRotate(){
        $dom.$clockHour.css("-webkit-transform","translate(-50%, -100%) rotate("+pointAngle.hours+"deg)").css("transform",pointAngle.hours+"deg");
        $dom.$clockMinute.css("-webkit-transform","translate(-50%, -100%) rotate("+pointAngle.minutes+"deg)").css("transform",pointAngle.minutes+"deg");
        $dom.$clockSecond.css("-webkit-transform","translate(-50%, -100%) rotate("+pointAngle.second+"deg)").css("transform",pointAngle.second+"deg");

        pointAngle.hours += 0.008334;
        pointAngle.minutes += 0.1;
        pointAngle.second += 6;

        pointReset();
    }

    $(document).ready(function () {
        initTime();
        initAngle();
        pointRotate();

        window.setInterval(pointRotate,1000);
    });
}(window.jQuery));